body { height: 100%; margin: 0; padding: 0; }
header { min-height:45px; font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; background:#1BA1E2 !important; }
.hidden{display:none;}
.xicon {  font-family: 'iconFont'; }
.header-init { height: 40px; overflow: hidden; padding: 5px 0px 0px 8px; } 
#ajax-loading { display: inline-block; vertical-align: top; height: 36px; position: absolute; margin-top: -11px; margin-left: -10px; display:none; }
#ajax-loading img, .header-init img { height:100%; width:auto; }
.b2e-logo #ajax-loading { position: absolute; top: 38px; left: 31px;}
.metro h1 { font-size: 4rem; line-height: 4rem; }
.metro .breadcrumbs { margin-left: 0px; }
.metro .button {font-size:inherit;}
button.medium, .button.medium { padding-top: 7px; padding-bottom: 7px; height:auto; }
.metro .button.large, .metro button.large { padding: 11px 19px; font-size: 2rem; }
div.home-toolbar {text-align:right;}
div.home-toolbar h2 {float:left; margin:0px 0px 5px 0px;}
div.home-toolbar button { margin-bottom: 5px; }
.metro .sidebar.light li.title span { font-family: 'Segoe UI Light_','Open Sans Light',Verdana,Arial,Helvetica,sans-serif; }
.metro .sidebar>ul li.title { padding: 8px 20px 10px 20px; }
.metro .sidebar>ul li a.dropdown-toggle:after { right: 10px; bottom: 9px; font-size:2rem;}

.container { width:99% !important; } /* hack for IE */
.navigation-bar-content.container {padding:0px;}
.element.place-right.all-device,.element-divider.place-right.all-device {display:block !important; float:right !important; }
.element-divider.place-right.no-desktop { display:none !important; }
.element.main-menu {float:left !important; display:inline-block !important; }
.metro .dropdown-toggle.no-arrow:after { display:none !important; }
.main-sidebar.sidebar { z-index:9999; display:none; position:absolute; position:fixed; top:45px; left: 0px; bottom:0px; width: 300px; height:auto; border:0px !important; border-right:1px solid #CCC !important; }
.main-sidebar-search { border-bottom:1px solid #CCC; }
.main-sidebar-search div, .main-sidebar-search input {border:0px !important; margin:0px !important;}
.main-menu-no-result { color: #991212; padding: 5px; display:none; }
.main-sidebar .main-menu-content { overflow:auto; overflow-x: hidden; position: absolute; top: 35px; left: 0px; right: 0px; bottom: 0px; }
.menu-keywords {display:none !important;}
.main-container {padding: 0px; margin: 0px !important; width: 100% !important; }
.page-tabs-outer { position:relative; overflow: hidden; height: 40px;}
.page-tabs-outer .tabs-controls { position:absolute; right:0px; display:none; }
.page-tabs-outer .tabs-controls a { display: inline-block; font-size: 27px !important; padding: 8px 0px; color:#fff; border-left:1px solid #fff; }
.page-tabs-outer .page-tabs { overflow:auto; background: #CCC;  }
.page-tabs-outer .page-tabs.scrollable { margin-right:56px;  }
.page-tabs-outer .page-tabs ul.tabs { margin: 0px; padding: 0px; white-space:nowrap; }
.page-tabs-outer .page-tabs .tabs li { display: inline-block;background: #EBEBEB; border-right:1px solid #ccc; border-top:1px solid #ccc;}
.page-tabs-outer .page-tabs .tabs li a { display: inline-block; padding:10px 5px; vertical-align: top; font-size: 1.4rem; }
.page-tabs-outer .page-tabs .tabs li a.tab-close-link {font-size:9px; color:#999; margin-top: 7px; }
.page-tabs-outer .page-tabs .tabs li.active { background:#fff; }
.page-tabs-outer .page-tabs .tabs li .tab-close-link {display:none;}
.page-tabs-outer .page-tabs .tabs li.active .tab-close-link {display:inline-block;}

.page-tabs.tab-list { overflow: hidden; }
.page-tabs.tab-list .tabs { white-space: normal; }
.page-tabs.tab-list .tabs li { display: block; }
.tab-frames .tab-frame, .tab-frames .tab-frame .sub-page {display:none;}
.tab-frames .tab-frame .sub-page.sub-page-default { display:block; }

.form-outer { padding: 10px 20px; }
.form-outer .toolbar { float: right; margin-top: 0px; }

#formHeader div.message-box { border-left: 3px solid #0C0; padding: 5px 5px 5px 15px; background: #EFE; display:none; margin-top: 10px; margin-bottom: 10px; }
#formHeader div.message-box ul { margin:0px; }
#formHeader div.message-box li { font-size:0.9em; }
#formHeader div.message-box.error { border-left: 3px solid #C00;  background: #FEE;}


/* Dialogs */
.errDetailDump {display:none;}
.dialogButtons { text-align:right; margin-top: 10px; padding-top: 10px; border-top: 1px solid #CCC;}
.window.shadow { min-width: inherit !important; width: auto !important; }

.main-form-toolbar-bottom, .main-form-buttons { border-top:1px solid #16499A; margin-top:20px; padding-top:10px; }


/* Login */
.login-outer { text-align: center; }
.login-inner { position: relative; width: 440px; min-height:175px; text-align:left; display:inline-block; background:transparent url(../images/b2e-line.png) repeat-y; }
.login-inner .b2e-logo { position: absolute; left: 0px; bottom: 0px; } 
.login-box { max-width: 300px; position: absolute; right: 0px; bottom: 4px; z-index: 1; }
.login-form .input-control.text { margin-bottom: 6px; }
.login-form .input-control.password { margin-bottom: 3px; }
.login-button { text-align: left; }
.login-button button {border:1px solid transparent; background:transparent; padding:1px 0px;}
.login-button button:active {background:transparent !important; color:#04C6F7 !important;}
.login-button button span { font-size: 30px !important; }
.login-button .login-btn-title { font-size: 14px !important; vertical-align: top; display: inline-block; margin-top: 6px; }
.login-box .b2e-title { margin-bottom: 10px; }
.copyblock { font-size: 11px; color: #CCC; text-align: center; position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 10px; }
.login-box div.message-box { margin-bottom: 10px; color: #C00; display:none; }
#loginBlock { position: absolute; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 99999; background: rgba(255, 255, 255, 0.9); }
#loginBlock, #loginBlock .login-outer { display:none; }
#loginBlock .login-inner { background-color: #FFF; border: 10px solid #FFF; width: 460px; border-top: 0px; min-height:240px; box-shadow: 0px 0px 9px 0px #CCC; -ms-box-shadow: 0px 0px 9px 0px #CCC; -o-box-shadow: 0px 0px 9px 0px #CCC; -moz-box-shadow: 0px 0px 9px 0px #CCC; -webkit-box-shadow: 0px 0px 9px 0px #CCC; border-radius: 0px 0px 20px 20px; -ms-border-radius: 0px 0px 20px 20px; -o-border-radius: 0px 0px 20px 20px; -moz-border-radius: 0px 0px 20px 20px; -webkit-border-radius: 0px 0px 20px 20px; }


.profileImgBox { border:5px solid #EEE; margin-bottom:5px; width:140px; height:140px; overflow:hidden; }
.profileImgBox img.profileImg { width:100%; height:auto; }
.dropzone-box.dropzone-outer {position:absolute; position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:999999; background-color:#fff; background-color:rgba(255,255,255,0.9); }
.dropzone-box.dropzone-outer .dz-default.dz-message {display:none;}
.dropzone-box.dropzone-outer div.dropzone-button { padding:10px; text-align:right; }
.dropzone-box.dropzone-outer div.dropzone-button a { color: #C00; font-size: 3em !important; }
.dropzone-box.dropzone-outer div.dz-dropbox {border:3px dashed #EEE; background-color:#fff; position:absolute; margin:0px; top: 65px; left:10px; right:10px; bottom:10px;}
.dropzone-box.dropzone-outer div.dz-dropbox form {position:absolute; top:0px; bottom:0px; left:0px; right:0px; background:transparent; margin:0px;}
.dropzone-box.dropzone-outer div.dz-dropmessage span { font-size: 50px !important; }
.dropzone-box.dropzone-outer div.dz-dropmessage {-ms-filter: none; filter: none; position:absolute; top:20px; left:20px;}


.grid:not(.fluid) > .row > [class*="span"]:nth-child(even) { margin-left: 0px !important; }
.grid:not(.fluid) > .row > [class*="span"]:nth-child(odd) { margin-right: 20px !important; }
.metro .grid .row [class*="span"] { float: left; min-height: 1px; margin-left: 0px;  }
.metro .grid .row [class*="span"] { float: left; min-height: 1px; margin-right: 20px; }

.metro .table th, .metro .table td { font-size: 1.4rem;}
.filter-panel { padding: 10px 10px 0px 10px; border-left: 5px solid #FF4000; background: #FFEFBF; }
.filter-panel .input-control { max-width:220px; vertical-align:top; }
.filter-panel button {margin-bottom:10px; vertical-align:top; }
.listContainer .tableButtons { text-align: right; padding: 10px 0px; }
.listContainer .tableButtons button { margin:3px 0px 3px 10px ; }
.listContainer .actioncolumn .linkdetail, .listContainer .tableButtons button.btnDeleteData { display:none; }
.listContainer .tablePaging .input-control.select { display:inline-block; width:auto; }
.listContainer .tablePaging .button.medium { height: auto; padding-top: 7px; padding-bottom: 7px; }
.listContainer .totalDataText { float: left; padding-top: 8px; }
.listContainer .tblHeader.checks, .listContainer .tblData.checks { width:1%; padding: 0px 8px; }
.listContainer .tblHeader.checks .input-control.checkbox, .listContainer .tblData .input-control.checkbox { margin-left: 4px; margin-bottom: 0px; }
.responsiveTable thead td, .responsiveTable thead th {background:#fbfbfb; vertical-align:middle !important; } 
.responsiveTable .dtlpriority4, .responsiveTable .dtlpriority3, .responsiveTable .dtlpriority2, .responsiveTable .dtlpriority1 {display:none;}
.responsiveTable td.mainfield a.linkdetail { border: 1px solid #000 !important; padding: 3px !important; margin-right: 5px; border-radius: 13px !important; -moz-border-radius: 13px !important; -o-border-radius: 13px !important; -webkit-border-radius: 13px !important; }
.responsiveTable td.mainfield a.linkdetail {display:none;}
.responsiveTable th.detailView, .responsiveTable td.detailView {display:none !important;}
.responsiveTable td.mainfield.hasDetailView a.linkdetail {display:inline !important;}
.responsiveTable th.tblHeader.actioncolumn {width:10%;}
.responsiveTable .actioncolumn a.linkedit {white-space:nowrap;}
.responsiveTable .tblDetailView { border-top: 1px solid #DDD; margin-top: 5px; display:none; }
.responsiveTable .tblDetailView .view { display:block; }
.responsiveTable .detailview-label { font-weight: bold !important; margin-top: 5px; }
.responsiveTable .detailview-value { padding-left: 15px; color: #999; }
.responsiveTable .actionColumn a {cursor:pointer;}
.responsiveTable tbody a.linkdetail.visible {display:inline-block !important;}
.responsiveTable tbody div.visible {display:block !important;}

h2.subtitle { border-bottom: 1px solid #666; padding-bottom: 10px; }
.metro .listview-outlook a.list.active {background:transparent !important; outline: 0px; }
.metro .listview-outlook a.list.active:hover { background-color: #E6F2FA !important; outline: 0; }
.metro .listview-outlook a.list.active:active { background-color: #CDE6F7 !important; color: #555 !important; }

.metro .input-control button.btn-lookup { background-color: #F0F0F0; position: absolute; top: 5px; z-index: 2; border: 0; right: 4px; width: 24px; height: 24px; min-height: 1px; min-width: 1px; padding: 0; margin: 0; display: block; }
.metro .input-control button.btn-lookup:focus { outline: 1px #CCC dotted;}
.metro .input-control button.btn-lookup:after { font-family: iconFont; font-size: 11pt; content: "\e0b4"; }



@media only screen and (max-width: 800px) {
    .element-divider.place-right.no-desktop { display:block !important; }
    .navigation-bar.fixed-top { position: fixed !important; }
    td.priority4, th.priority4, .dtlpriority3, .dtlpriority2 {display:none}
    .responsiveTable .dtlpriority4 {display:block;}
    td.mainfield a.linkdetail.priority4 {display:inline-block;}
    .responsiveTable .tblDetailView.dtlpriority3, .responsiveTable .tblDetailView.dtlpriority2, .responsiveTable .tblDetailView.dtlpriority4 {display:none;}
}

@media only screen and (max-width: 640px) {
    .main-menu .text-label {display:none;}
    .main-sidebar.sidebar { position:relative; width:auto; }
    .main-sidebar .main-menu-content { overflow: visible; position: relative; top: 0px; }
    td.priority3, th.priority3, .dtlpriority2 {display:none}
    .responsiveTable .dtlpriority3 {display:block;}
    td.mainfield a.linkdetail.priority3 {display:inline-block;}
    .responsiveTable .tblDetailView.dtlpriority3, .responsiveTable .tblDetailView.dtlpriority2, .responsiveTable .tblDetailView.dtlpriority4 {display:none;}
    .responsiveTable .actionColumn {text-align:right;}
}

@media only screen and (max-width: 480px) {
    .login-box { max-width: 300px; position: relative; right: auto; bottom: auto; margin-left: 30px; margin-top: 20px; }
    .login-inner .b2e-logo { position: relative; left: 0px; bottom: 0px; display: block; } 
    .login-inner, #loginBlock .login-inner { width: auto; }
    .login-button { float: right; }
    .metro h1 { clear: both; }
    #userDisplayName {display:none;}
    td.priority2, th.priority2 {display:none}
    .responsiveTable .dtlpriority2 {display:block;}
    td.mainfield a.linkdetail { border: 1px solid #000 !important;}
    td.mainfield a.linkdetail.priority2 {display:inline-block;}
    .responsiveTable .tblDetailView.dtlpriority3, .responsiveTable .tblDetailView.dtlpriority2, .responsiveTable .tblDetailView.dtlpriority4 {display:none;}
    .responsiveTable .actionColumn a {border: 1px solid #1B6EAE; padding: 2px 4px; border-radius: 15px; -o-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
    .responsiveTable .actionColumn .tblActionDel {border: 1px solid #F00; }
}